<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div style=" padding: 10px; border: 1px solid #ccc; text-align: center">
          <img style="width: 80%; " src="@/assets/logo.png" alt="">
          <div style="text-align: center"> nihaonie</div>
          <div style="text-align: center; color: dodgerblue"> 价格捏:19$</div>

        </div>
      </el-col>

      <el-col :span="6">
        <div style=" padding: 10px; border: 1px solid #ccc; text-align: center">
          <img style="width: 80%; " src="@/assets/logo.png" alt="">
          <div style="text-align: center"> nihaonie</div>
          <div style="text-align: center; color: dodgerblue"> 价格捏:91$</div>

        </div>
      </el-col>

      <el-col :span="6">
        <div style=" padding: 10px; border: 1px solid #ccc; text-align: center">
          <img style="width: 80%; " src="@/assets/logo.png" alt="">
          <div style="text-align: center"> nihaonie</div>
          <div style="text-align: center; color: dodgerblue"> 价格捏:123$</div>

        </div>
      </el-col>

      <el-col :span="6">
        <div style=" padding: 10px; border: 1px solid #ccc; text-align: center">
          <img style="width: 80%; " src="@/assets/logo.png" alt="">
          <div style="text-align: center"> 美丽的商品</div>
          <div style="text-align: center; color: dodgerblue"> 价格捏:99$</div>
        </div>
      </el-col>
    </el-row>

    <br> <br> <br>
    <el-row>
      <el-col :span="24">
        <el-button> Element Botton</el-button>
        <el-button type="primary"> Element Botton Primary</el-button>
        <el-button type="danger"> Element Botton Danger</el-button>
        <el-button type="info"> Element Botton Info</el-button>
        <el-button type="success" round> Element Botton 圆角-Success</el-button>
      </el-col>
    </el-row>


    <el-row>

      <br>
      <!--      编辑 删除       -->
      <el-col>
        <el-button type="primary" circle icon="el-icon-edit"></el-button>
        <el-button type="danger" circle icon="el-icon-delete"></el-button>
      </el-col>
    </el-row>

    <br>
    <!--    表单-->
    <el-row style="margin: 20px">
      <el-col>
        <!--         输入框强制要求有v-model-->
        <el-input style="width: 200px" v-model="username" placeholder="请输入用户名"></el-input>

        <br> <br>
        <el-input show-password style="width: 200px" v-model="password" placeholder="请输入密码"></el-input>

        <br> <br>
        <el-input style="width: 200px" type="textarea" v-model="lognie" placeholder="请输入lj话"> nihao</el-input>
        <!--        前后置的图标-->

        <br> <br>
        <el-input style="width: 300px" v-model="prenie" prefix-icon="el-icon-search"
                  placeholder="请输入前置搜索内容"></el-input>

        <br> <br>
        <el-input clearable style="width: 300px" v-model="tilenie" suffix-icon="el-icon-search"
                  placeholder="请输入后置搜索内容"></el-input>

        <br> <br>
      </el-col>

    </el-row>

    <br>
    <!--带有检索功能的输入框-->
    <el-row>
      <div> 这是一个带检索的输入框捏</div>
      <el-autocomplete
          v-model="searchnie"
          style="width: 200px"
          placeholder="请输入信息"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
      >
      </el-autocomplete>
    </el-row>

    <br><br>

    <el-row>
      <div> 这是一个下拉框捏</div>
      <!--      @:绑定时间 <=> v-on -->
      <el-select v-model="selectnie" @change="changeSelect">
        <el-option value="xt"></el-option>
        <el-option value="xy"></el-option>
        <el-option value="nh"></el-option>
        <el-option value="bad"></el-option>
      </el-select>

      <!--      vfor遍历的下拉框 -->
      <el-select v-model="vof">
        <el-option v-for="item in dogs" :key="item.id" :label="item.name" :value="item.name"></el-option>
      </el-select>


      <!--    label的作用 -->
      <el-select v-model="labelnie" @change="changelabel" >
<!--        key标记唯一标识, label写用户信息, val也写唯一标识, 最后输出该下拉框的结果,应为对应的key,展示的是lable姓名 -->
        <el-option v-for="item in usernie" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>

    </el-row>



    <br><br><br><br><br><br><br><br><br><br><br>
  </div>

</template>


<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      lognie: '',
      prenie: '',
      tilenie: '',
      searchnie: '',
      // 值必须使用value
      coffie: [{value: '1行xbk'}, {value: '2咨询rx'}, {value: '3阿萨德kd'}],
      selectnie: '',
      dogs: [
        {name: "ly", id: 1},
        {name: "lk", id: 2},
        {name: "td", id: 3},
        {name: "xx", id: 4},
      ],
      vof: '',
      labelnie:'',
      usernie:[
        {name: "xt", id: 45234435},
        {name: "xt1", id: 234542354},
        {name: "xxx1", id: 455456456},
        {name: "xxss2", id: 7787894},
      ],

    }
  }, methods: {
    querySearch(query, cb) {
      let result =
          query ? this.coffie.filter(v => v.value.includes(query)) : this.coffie
      console.log(result);
      cb(result);
    }, changeSelect() {
      console.log(this.selectnie)
    },changelabel() {
      console.log(this.labelnie)
    },


  },
}

</script>